<template>
  <div id="myself">
    <div class="myselfBgc">
      <h2>个人资料</h2>
    </div>
    <router-view></router-view>
    <div class="myself-content">
      <div class="left clearFix">
        <file-img></file-img>
      </div>
      <div class="right">
        <div class="right-content">
          <div>
            <label>昵称</label>
            <input type="text"/>
          </div>
          <div>
            <label>邮箱</label>
            <input type="email" readonly="true" v-model="emailText"/>
          </div>
          <div>
            <label>密码</label>
            <input type="password" readonly="true" v-model="pwdText"/>
            <span>
              <router-link to="/account/myselfData/modifypwd">
                <img :src="imgEdit">
              </router-link>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="bgd"></div>
    <div class="footer">
      <footer-one></footer-one>
    </div>
  </div>
</template>
<script>
  import edit from '../../assets/edit.png'
  import FileImg from '../../components/firmware/file.vue'
  import FooterOne from '../../components/firmware/footer.vue'
  export default{
    name:'myself',
    data(){
      return{
        imgEdit:edit,
        screenHeight: window.screen.height-150,
        emailText:'3550701557@qq.com',
        pwdText:'123456789'
      }
    },
    //注册组件
    components:{FooterOne,FileImg},
    //实例加载完执行函数
    mounted(){
      //设置模块高度
      document.getElementById('myself').style.height=this.screenHeight+"px";//页面初始化
    },
    //监听
    watch:{
      screenHeight (val) {
          console.log(val)
        this.screenHeight = val
        document.getElementById('myself').style.height = this.screenHeight -150 + "px";//检测窗口的大小，并赋值
      },
    }
  }
</script>
<style scoped>
  #myself{
    width: 100%;
    margin: auto;
  }
  .myselfBgc{
    background: url("../../assets/bg_background.png") no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    display: table;
    height: 30%;
    margin: auto;
    width: 100%;
  }
  .myselfBgc h2{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 2.0rem;
    font-weight: 100;
    letter-spacing:2px;
  }
  .myself-content{
    padding: 5rem 0;
    height: 70%;
    /*background-color: #f5f5f5;*/
  }
  .myself-content .left{
    display: inline-block;
    width: 30%;
    vertical-align: middle;
    padding-right: 100px;
  }
  .myself-content .right{
    display: inline-block;
    width: 50%;
    text-align: left;
    vertical-align: middle;
  }
  .myself-content right div{
    height: 250px;
  }
  .myself-content .right .right-content{
    width: 70%;
    background-color: #ffffff;
    height: 250px;
    padding-left: 45px;
    border-radius: 5px;
  }
  .right-content div{
    padding: 15px 0;
    font-size: 1.2rem;
  }
  .right-content div:first-child{
    padding: 45px 0 15px 0;
  }
  .right-content input{
    height: 35px;
    width: 60%;
    font-size: 1.1rem;

  }
  .right-content div:nth-child(1) input{
     border: 0;
     background-color: gainsboro;
     outline: none;
     text-indent: 5px;
  }
  .right-content div:nth-child(2) input{
    border: 0;
    outline: none;
    background-color: #ffffff;
  }
  .right-content div:last-child input{
    border: 0;
    outline: none;
    background-color: #ffffff;
    width: 40%;
  }
  .right-content div label{
    padding-right:20px ;
  }
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom:0;
    min-width: 1200px;
    z-index: 1;
    background-color: #ffffff;
  }
  .bgd{
    background: #f5f5f5;
    /*color: rgb(232, 232, 232);*/
    white-space: pre;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    position: fixed;
    z-index: -9999;
    padding: 10px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: auto;
    text-align: left;
  }
  /*清除浮动*/
  .clearFix:after{
    content: '';
    clear: both;
    display: block;
  }
</style>

